<template>
  <div class="charge-container">
    <template>
      <el-table :data="vipList" border style="width: 100%">
        <el-table-column label="产品图片" align="center">
          -->
          <!-- 插槽作用域 -->
          <template v-slot="{ row }">
            <el-avatar
              shape="square"
              :size="80"
              fit="scale-down"
              :src="row.imageUrl"
            ></el-avatar>
          </template>
          -->
        </el-table-column>
        <el-table-column prop="productName" label="产品名称" width="180" align="center">
        </el-table-column>
        <el-table-column prop="description" label="产品描述" align="center">
        </el-table-column>
        <el-table-column prop="price" label="价格(元)" align="center"> </el-table-column>
        <el-table-column prop="inventory" label="库存" align="center"> </el-table-column>
        <el-table-column align="center" label="操作">
          <template v-slot="{ row }">
            <el-button
              icon="iconfont icon-chongzhi"
              type="primary"
              @click="pre_order(row)"
            >
              充值
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>

<script>
import * as api from "../../../../api";
import { mapMutations } from "vuex";
export default {
  methods: {
    ...mapMutations(["SET_CURRENT_CHARGE_PRODUCT"]),
    pre_order(row) {
      //获得当前这一行的产品id
      // console.log(row);
      this.$confirm(
        `您正在购买${row.productName}, 是否确认?\n${row.description}`,
        "购买提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "success",
        }
      )
        .then(() => {
          //1.将当前购买的商品存到vuex
          //给row添加一个属性,quantity
          row.quantity = 0;
          this.SET_CURRENT_CHARGE_PRODUCT(row);
          //2.页面跳转到pre_order页面
          this.$router.push({ name: "pre_order" });
          //3.展示商品详情
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
  },
  data() {
    return {
      vipList: [],
    };
  },
  created() {
    api.getVipListApi("20210827165510715").then((res) => {
      console.log(res);
      if (res.data.state) {
        //获取成功
        this.vipList = res.data.data;
      } else {
        this.$message.error("获取失败");
      }
    });
  },
};
</script>

<style scoped lang="less">
.el-avatar {
  /deep/ img {
    width: 100%;
  }
  height: 30px !important;
  background-color: #fff;
}
</style>
